<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>带链接跳转的二维码生成</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet" href="/assets/layui/css/layui.css" media="all">
<script type="text/javascript" src="/assets/jquery/jquery-3.3.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/assets/jquery_form/jquery.form.js" charset="utf-8"></script>
</head>
<body>

	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px;">
		<legend>带链接跳转的二维码生成</legend>
	</fieldset>

	<form class="layui-form" id="avatar_upload_form" action="/gen/uploadImg" method="POST" enctype="multipart/form-data">
		<div class="layui-form-item">
			<label class="layui-form-label">LOGO</label>
			<div class="layui-upload">
			  <input type="file" name="avatar" class="layui-btn layui-btn-normal" />
			  <input id="upload_btn" class="layui-btn" type="submit" value="开始上传"/>
			</div>
			<label id="imgMsg"></label>
		
		</div>
	</form>
	<form class="layui-form" action="">
	<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-block">
				<img id="jcrop_target"  />
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">地址</label>
			<div class="layui-input-block">
				<input type="text" name="title" id="address" lay-verify="required"
					autocomplete="off" placeholder="请输入需要跳转的链接地址,以http://开头" class="layui-input">
			</div>
		</div>
	</form>
	<div class="layui-input-block">
				<button class="layui-btn" id="gencode">生成</button>
				<a class="layui-btn" href="/download" id="downcode">下载</a>
			</div>
	<div class="layui-form-item">
		<label class="layui-form-label">二维码</label>
		<div class="layui-input-block" id="qrcode">
		</div>
	</div>
	<script>



	// 使用 ajax form 上传文件
	$(document).ready(function() {
		$("#avatar_upload_form").ajaxForm({
			dataType: "json",
			beforeSerialize: function($form, options) {
			},
			beforeSubmit: function(formData, jqForm, options) {

				var uploadBtn = $("#upload_btn");
				uploadBtn.attr("disabled", true);
				uploadBtn.val("图片预览图已生成");
				return true;
			},
			success: function(ret) {
				if(ret.state == "ok") {
					var jcropTarget = $("#jcrop_target");
					jcropTarget.attr("src", ret.avatarUrl + "?r="+Math.random());
					jcropTarget.show();
					$("#upload_btn").hide();
					$("#avatar_save_box").show();
				} else {
					showFailMsg(ret.msg);
					var uploadBtn = $("#upload_btn");
					uploadBtn.val("上传");
					uploadBtn.attr("disabled", false);
				}
			},
			error: function(ret) {  // 仅做为示例，只要后端是 status 200，就不会调用
				showFailMsg(ret.msg);
			}
		});
	});
	




	
layui.use(['form','upload'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,upload = layui.upload;

  
  //执行实例
  var uploadInst = upload.render({
    elem: '#logo' //绑定元素
    ,url: '/gen/upload' //上传接口
    ,done: function(res){
      if(res.state=='ok'){
          $("#imgMsg").html(res.msg);
          $('#logo').addClass('layui-btn-disabled').attr('disabled',"true");
          layer.msg(res.msg,{icon:1});
          }
    }
    ,accept: 'images' //允许上传的文件类型
    ,size: 1024 //最大允许上传的文件大小
    ,auto:true
    ,error: function(){
      //请求异常回调
    }
  });

 
$("#gencode").click(function(){
	$.ajax({ 
        type: "POST", 
        data:{title:$("#address").val(),imgMsg:$("label#imgMsg").text()},
        dataType: "JSON", 
        url: "/gen/genCode",
        success: function(data) {
             if(data.state=='ok'){
					layer.msg(data.msg,{icon:1});
					$("#qrcode").html("<img alt='二维码' src='"+data.imgurl+"'/>")
	             }else if(data.state=='fail'){
	            	 layer.msg(data.msg,{icon:2});
		             }
        }
    });
})  

});
</script>

</body>
</html>